{% extends 'app01/site.html' %}
{% block files %}

{% endblock %}
{% block content %}

    <div class="col-md-10">
        <!--文章显示内容详细内容开始-->
        <h1>控件名字：{{ source.name }} </h1>
        <br>
        <div><h4>
            控件描述：
        </h4> {{ source.descn }}</div>


        <br>
        <div>
            <div class="panel panel-default">
                <div class="panel-heading"><h4>效果图</h4></div>
{#                <div class="panel-heading">#}
{#                    <h3 class="panel-title">Panel title</h3>#}
{#                </div>#}
                <div class="panel-body">
                    <img src="/media/{{ source.image }}" alt="图片加载失败" width="900">
                </div>
            </div>

        </div>
        <br>
        <div class="panel panel-default">
            <div class="panel-heading"><h4>原代码</h4></div>
            <div class="panel-body">
                {% for line in files %}
                    <p>{{ line }}</p>
                {% endfor %}
            </div>
        </div>
     <div class="pull-right" ><!--收藏-->&nbsp;&nbsp;&nbsp;&nbsp;
        <h3>
            <a href="/app01/show_web_source?pk={{ sou_pk }}&username={{ source.uploader.username }}" id="down_source_id">
                下载源代码</a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="img_id" id="div_file_id">  <img src="{{ img }}" alt="" id="img_id"></label>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <span class="glyphicon glyphicon-download-alt" style="color: #337ab7">下载量(<span id="span_id_down">{{ source.down_numbers }}</span>)</span>
        </h3>

     </div>
    </div>
    <div>
    </div>



    <!--文章显示内容详细内容开始-->
    </div>



    <div class="row" style="text-align: right"><h2>精英计划，联系 <span
            class="glyphicon glyphicon-phone-alt"></span>1232222，<span class="glyphicon glyphicon-envelope"></span>123@12233.com
    </h2></div>

    </div>
{% endblock %}



{% block js %}
    <script>
    //给下载源代码加一个点击事件，在前端渲染下载数
    $('#down_source_id').click(function () {
        let old_num = $('#span_id_down').text()
        let new_num = parseInt(old_num) + 1
        $('#span_id_down').text(new_num)

    })

        //关注的ajax请求
        $('#focu_btn_id').click(function () {
            $.ajax({
                url: '/app01/focu/user/',
                type: 'get',
                data: {'my_name': '{{ request.user.username }}', 'focu_name': '{{ username }}'},
                success: function (array) {
                    alert(array.msg)
                }
            })

        })


    //收藏的ajax
      //给收藏设置一个点击事件。
    $('#div_file_id').on('click',function () {

        if('{{ col_file }}'==='no'){ //用户未收藏，现在想收藏该文章
            alert('收藏成功')
            $('#div_file_id>img').attr('src','/static/img/active.png/')

            $.ajax({
                url:'',
                type:'post',
                data:{
                    'operate':true,//代表加入收藏
                    'file_id':'{{  sou_pk }}',
                },
                success:function (attr) {
                   window.location.reload()//需要刷新后，才能再次使用
                    //因为我们的判断条件是由函数 article_detail发送的col_img
                    //而我们这里发送的是ajax请求，局部刷新，异步请求，原来的col_img不会变，保持一开始访问页面的值。
                    //所以需要刷新来更新col_img的值

                }
            })
        }
        else if('{{ col_file }}'==='yes')//代表用户已经收藏，现在要取消收藏
        {
            alert('取消收藏')
            {#$('#div_img_id').firstChild.attr('src','/static/img/noactive.png/')#}
            $('#div_file_id>img').attr('src','/static/img/noactive.png/')
            $.ajax({
                url:'',
                type:'post',
                data:{
                    'operate':false, //代表取消收藏
                    'file_id':'{{  sou_pk }}',
                },
                success:function (attr) {

                     window.location.reload()//需要刷新后，才能再次使用

                }
            })
        }

    })

    </script>
{% endblock %}
